<template>
	<div class="home">
		<div class="header">
			<div class="title">
				<div class="logo">
					<img src="../../assets/logo.png" />
				</div>
				<div class="name">订餐管理系统</div>
			</div>
			<div class="manage">
				<div class="manage-user">
					<el-dropdown @command="handleCommand">
						<div class="user-photo">
							<el-avatar> admin </el-avatar>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="exit" icon="iconfont icon0tuichudenglu-05">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<div class="user-name">
						{{userinfo.user_nickname}}
					</div>
				</div>
			</div>
		</div>
		<div class="home-content">
			<div class="left">
				<el-scrollbar>
					<div>
						<!-- unique-opened -->
						<el-menu default-active="/home/main" router class="el-menu-vertical-demo" background-color="#304156" text-color="rgb(191, 203, 217)"
						 active-text-color="rgb(24, 144, 255)" :unique-opened="true">
							<el-menu-item index="/home/main">
								<i class="iconfont iconzhuye"></i>主页
							</el-menu-item>
							<el-submenu index="2">
								<template slot="title">
									<i class="iconfont iconshangpinguanli"></i>
									<span>美食管理</span>
								</template>
								<el-menu-item index="/home/food">菜品管理</el-menu-item>
								<el-menu-item index="/home/foodCategory">菜品分类管理</el-menu-item>
							</el-submenu>
							<el-menu-item index="/home/order">
								<i class="iconfont iconweibiaoti-"></i>订单管理
							</el-menu-item>
							<el-submenu index="4">
								<template slot="title">
									<i class="iconfont iconyonghuguanli1"></i>
									<span>用户管理</span>
								</template>
								<el-menu-item index="/home/user">管理用户</el-menu-item>
								<el-menu-item index="/home/vip">vip管理</el-menu-item>
							</el-submenu>
							<el-menu-item index="/home/notice">
								<i class="iconfont icongonggaoguanli"></i>公告管理
							</el-menu-item>
							<el-submenu index="6">
								<template slot="title">
									<i class="iconfont iconicon_xinyong_xianxing_jijin-"></i>
									<span>信息管理</span>
								</template>
								<el-menu-item index="/home/restaurant">餐厅基本信息管理</el-menu-item>
								<el-menu-item index="/home/constant">常数项管理</el-menu-item>
								<el-menu-item index="/home/constantCategory">常数项类别管理</el-menu-item>
							</el-submenu>
							<el-menu-item index="/home/userRights">
								<i class="iconfont iconquanxianguanli-"></i>权限管理
							</el-menu-item>
							<el-submenu index="8">
								<template slot="title">
									<i class="iconfont iconhongbaoguanli"></i>
									<span>红包管理</span>
								</template>
								<el-menu-item index="/home/redBag">管理红包</el-menu-item>
								<el-menu-item index="/home/redBagDetail">红包使用明细</el-menu-item>
							</el-submenu>
							<el-submenu index="9">
								<template slot="title">
									<i class="iconfont iconjifenguanli"></i>
									<span>积分管理</span>
								</template>
								<el-menu-item index="/home/point">管理积分</el-menu-item>
								<el-menu-item index="/home/pointDetail">积分使用明细</el-menu-item>
							</el-submenu>
							<el-submenu index="10">
								<template slot="title">
									<i class="iconfont iconcaiwuguanli"></i>
									<span>财务管理</span>
								</template>
								<el-menu-item index="/home/daily">财务日结</el-menu-item>
								<el-menu-item index="/home/statistics">财务统计</el-menu-item>
							</el-submenu>
							<el-menu-item index="/home/customerService">
								<i class="iconfont iconkefu1"></i>客服管理
							</el-menu-item>
						</el-menu>
					</div>
				</el-scrollbar>
			</div>

			<div class="right">
				<el-scrollbar>
					<div>
						<router-view />
					</div>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>

<script>
	import HomeService from './HomeService.js';
	export default {
		name: "Home",
		data() {
			return {
				userinfo: '',
			}
		},
		created() {
			this.getUserinfo();
		},
		methods: {
			getUserinfo() {
				HomeService.getlogin(res => {
					console.log(res);
					this.userinfo = res.loginUser;
				})
			},
			handleCommand(command) {
				if(command == 'exit'){
					this.$store.commit('changeLogin','');
					this.$router.back();
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import "./home.less";
	@import "../../style/scrollbar.css";

	.home {}

	i{
		margin-right: 10px;
		font-size: 18px;
	}

	.header {
		height: @header-height;
		width: 100%;
		background-color: #ffffff;
		line-height: @header-height;
		display: flex;
		position: relative;
	}

	.title {
		width: 250px;
		display: flex;
		justify-content: space-between;

		.logo {
			width: 60px;
			height: 60px;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			font-size: 22px;
			font-weight: bold;
		}
	}

	.manage {
		position: absolute;
		right: 80px;

		.manage-user {
			display: flex;
			align-items: center;

			.user-photo {
				height: 40px;
				width: 40px;
				cursor: pointer;
			}

			.user-name {
				margin-left: 10px;
			}
		}
	}

	.home-content {
		height: calc(@viewport-height - @header-height);
		width: 100%;
		display: flex;
	}

	.left {
		width: @left-width;
		height: 100%;
		background-color: #304156;
		// overflow-y: auto;
		// overflow-x: hidden;
	}

	.right {
		height: 100%;
		width: calc(100% - @left-width);
		background-color: #f0f2f5;
		// overflow-y: auto;
	}

	.el-menu {
		border-right-width: 0;
	}

	.el-submenu .el-menu-item {
		min-width: @left-width;
	}
</style>
<!-- <style src="../../style/scrollbar.css"  scoped></style> -->
